<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <Echart
    id="leftCenter"
    :options="options"
    class="left_center_inner"
    v-if="pageflag"
    ref="charts"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentGET } from "api/modules";
export default {
  data() {
    return {
      options: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0,
      },
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      // this.pageflag =false

      currentGET("big1").then((res) => {
        //只打印一次
        if (!this.timer) {
          console.log("设备总览", res);
        }
        if (res.success) {
          this.countUserNumData = res.data;
          this.$nextTick(() => {
            this.init();
          });
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on("mouseover", (params) => {
        this.clearData();
      });
      myChart.on("mouseout", (params) => {
        this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime
        );
      });
    },
    init() {
      let total = this.countUserNumData.totalNum;
      let colors = ["#ECA444", "#33A1DB", "#56B557"];

      this.options = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          show: true,
          orient: "vertical",
          right: 20,
          top: 80,
          bottom: 60,
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
          formatter: function (name) {
            let data = [
              { value: 55, name: "60岁以下" },
              { value: 165, name: "60-70岁" },
              { value: 273, name: "70-80岁" },
              { value: 305, name: "80-90岁" },
              { value: 35, name: "90岁以上" },
              { value: 231, name: "自理" },
              { value: 429, name: "半自理" },
              { value: 232, name: "无法自理" },
            ];

            // let name1 = option.series[0].name;  // 第1组数据的name

            let tarValue; // 定义一个最终结果变量
            // let total1 = 0;  // 定义一个变量，接收第1组数据的和

            for (let i = 0; i < data.length; i++) {
              if (name == data[i].name) tarValue = data[i].value;
            }
            return name + " : " + tarValue + "人";
          },
        },
        // tooltip: {
        //   trigger: "item",
        //   backgroundColor: "rgba(0,0,0,.6)",
        //   borderColor: "rgba(147, 235, 248, .8)",
        //   textStyle: {
        //     color: "#FFF",
        //   },
        // },
        // legend: {
        //   show: true,
        //   bottom: "5",
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        series: [
          {
            name: "会员年龄分布",
            type: "pie",
            selectedMode: "single",
            radius: [0, "40%"],
            center: ["20%", "60%"],
            label: {
              show: false,
              // position: "inner",
              // fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 55, name: "60岁以下" },
              { value: 165, name: "60-70岁" },
              { value: 273, name: "70-80岁" },
              { value: 305, name: "80-90岁" },
              { value: 35, name: "90岁以上" },
            ],
          },
          {
            name: "健康统计与评估",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["20%", "60%"],
            labelLine: false,
            label: {
              formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
              // formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              // backgroundColor: "#F6F8FC",
              // borderColor: "#8C8D8E",
              // borderWidth: 1,
              // borderRadius: 4,
              // rich: {
              //   a: {
              //     color: "#6E7079",
              //     lineHeight: 22,
              //     align: "center",
              //   },
              //   hr: {
              //     borderColor: "#8C8D8E",
              //     width: "100%",
              //     borderWidth: 1,
              //     height: 0,
              //   },
              //   b: {
              //     color: "#4C5058",
              //     fontSize: 14,
              //     fontWeight: "bold",
              //     lineHeight: 33,
              //   },
              //   per: {
              //     color: "#fff",
              //     backgroundColor: "#4C5058",
              //     padding: [3, 4],
              //     borderRadius: 4,
              //   },
              // },
            },
            data: [
              { value: 231, name: "自理" },
              { value: 429, name: "半自理" },
              { value: 232, name: "无法自理" },
            ],
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped></style>
